<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.header_19')}}</h2>
            <div class="personCon" @click="isShow=false">
                <div class="infopanel">
                    <h2 class="persontitle">{{$t('l.add_1')}}</h2>
                    <div class="bindphonecon" v-show="!isBind">
                        <p class="title">{{$t('l.add_2')}}</p>
                        <div class="putgroup clearfix">
                            <div class="putgroupselect">
                                <input @focus="showlist" @click.stop v-model="areaCode" />
                                <drop-down @inputValue="getInputValue" @item-click="itemClick" :itemlist="itemlist" :placeholder="placeholder" :nodatatext="nodatatext" :isShow="isShow" style="width:518px;"></drop-down>
                            </div>
                            <input class="comput small" :placeholder="$t('l.personal_256')" v-model="account" style="width:438px;">
                            <p class="errortext"></p>
                        </div>
                        <p class="title">{{$t('l.personal_43')}}</p>
                        <div class="putgroup clearfix">
                            <input class="comput small" v-model="verifyCode" :placeholder="$t('l.personal_44')" style="width:395px;">
                            <button v-show="sendAuthCode" class="codebtn active fr" @click.stop="sendPhoneCode">{{$t('l.personal_45')}}</button>
                            <button v-show="!sendAuthCode" class="codebtn fr">{{auth_time}}s</button>
                        </div>
                        <a class="btn changebtn" @click.stop="bindPhone">{{$t('l.personal_186')}}</a>
                    </div>
                    <div class="bindphonecon" v-show="isBind">
                        <div class="bindsuc">
                            <img src="../../assets/images/sucico.png">
                            <h2>{{$t('l.add_3')}}！</h2>
                            <p>{{downtime}}{{$t('l.personal_72')}}</p>
                        </div>
                    </div>    
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .vue-dropdown.default-theme .list-module li .list-item-name{display: block !important;}
    .infopanel{
        background:#fff;
        padding:40px 46px 46px 34px;
        min-height: 100%;
        box-sizing: border-box;
        .bindphonecon{
            width:518px;
            margin:43px auto;
            .title{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
                padding-bottom:5px;
            }
            .padbtm{
                padding-bottom:32px;
            }
            .headimg{
                padding-top:6px;
                .current{
                    float:left;
                    border-radius:3px;
                    border:1px solid rgba(221,224,235,1);
                    width:80px;
                    height:80px;
                    margin-right:20px;
                    padding:10px;
                    box-sizing: border-box;
                    img{
                        width:60px;
                        height:60px;
                        border-radius:50%;
                    }
                }
                .uploadhead{
                    float:left;
                    border-radius:3px;
                    border:1px solid rgba(221,224,235,1);
                    width:80px;
                    height:80px;
                    margin-right:10px;
                    padding:10px;
                    box-sizing: border-box;
                    .uploadbar{
                        text-align:center;
                        width:100%;
                        height:100%;
                        img{
                            width:20px;
                            height:20px;
                            padding-bottom:10px;
                        }
                        p{
                            font-size:12px;
                            font-weight:400;
                            color:rgba(51,56,94,1);
                            line-height:18px;
                        }
                    }
                }
                .uploadtip{
                    font-size:12px;
                    font-weight:400;
                    color:rgba(51,56,94,1);
                    line-height:19px;
                    padding-top:21px;
                }
            }
            .changebtn{
                width:100%;
                height:40px;
                margin-top:50px;
                line-height:40px;
            }
        }
    }
}
</style>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import dropDown from "@/components/dropdown";
import {api} from '@/api/api';
export default {
    components: {
        PersonalHeader,
        PersonalSide,
        dropDown
    },
    data() {
        return {
           itemlist: [],
           datalist:[],
            placeholder: this.$t('l.add_36'),
            nodatatext: this.$t('l.add_37'),
            areaCode: "+86",
            isShow:false,
            account:"",
            sendAuthCode:true,
            verifyCode:"",
            auth_time:"",
            isBind:false,
            intro:"",
            downtime:3
        }
    },
    created(){
        this.intro = this.$store.state.userintro;
    },
    methods:{
        getAuthCode() {
            this.sendAuthCode = false;
            this.auth_time = 120;
            var auth_timetimer =  setInterval(()=>{
                this.auth_time--;
                if(this.auth_time<=0){
                    this.sendAuthCode = true;
                    clearInterval(auth_timetimer);
                }
            }, 1000);
        },
        itemClick(data) {
            this.areaCode= data.code;
            this.isShow = false;
        },
        getInputValue(searchvalue) {
            if(searchvalue==""){
                this.itemlist = this.datalist;
                return;
            }
            let itemlist = [];
            // 请求获取筛选列表
            
            this.datalist.forEach((item,index)=>{
                if(item.code.indexOf(searchvalue) != -1){
                    itemlist.push(item);
                }
            })
            this.itemlist = itemlist;
            //this.$set(this.itemlist,itemlist);
        },
        showlist(){
            this.isShow = true;
        },
        //发送手机验证码
        async sendPhoneCode(){
            let that = this;
            let res = await api.sendPhoneCode({
                areaCode:that.areaCode,
                phone:that.account,
                type:"B"
            })
            if(res.data.code==0){
                that.$layer.msg('发送成功');
                that.getAuthCode();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //绑定手机
        async bindPhone(){
            let that = this;
            let res = await api.bindaccount({
                account:that.account,
                areaCode:that.areaCode,
                type:1,
                verifyCode:that.verifyCode
            })
            if(res.data.code==0){
                that.$layer.msg('绑定成功');
                that.isBind =true;
                that.goSafeHome();
                that.intro.cellPhone = that.account;
                that.intro.phoneEnabled = 1;
                localStorage.setItem("userintro",JSON.stringify(that.intro));
                that.$store.commit('changestate');
            }else if(res.data.code==1050002){
                that.$layer.msg(that.$t('l.add_116'));
            }else if(res.data.code==12002){
                that.$layer.msg(that.$t('l.add_80'));
            }else if(res.data.code==1020003){
                that.$layer.msg(that.$t('l.add_87'));
            }else if(res.data.code==12004){
                that.$layer.msg(that.$t('l.add_79'));
            }else if(res.data.code==12005){
                that.$layer.msg(that.$t('l.add_86'));
            }else if(res.data.code==1010003){
                that.$layer.msg(that.$t('l.personal_73'));
            }else if(res.data.code==12000){
                that.$layer.msg(that.$t('l.add_119'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        goSafeHome(){
            let that = this;
            let interval = setInterval(function(){
                if(that.downtime>0){
                    that.downtime--
                }else{
                    clearInterval(interval);
                    that.$router.push({
                        path: "/safeSetting"
                    });
                }
            },1000)
        },
        //获取区号
        async getAreacode(){
            let that = this;
            let res = await api.selectList({
                category:"AREA_CODE",
                language:"zh_CN"
            })
            if(res.data.code==0){
                that.datalist = [];
                that.itemlist = [];
                res.data.data.forEach((item,index)=>{
                    that.datalist.push({
                        code:item.value,
                        name:item.name
                    });
                    that.itemlist.push({
                        code:item.value,
                        name:item.name
                    });
                })
            }
        },
    },
    mounted(){
        this.getAreacode();
    }
}
</script>


